<template>
  <div class="common-container">
    <main-title />
    <div class="content-wrap">
      <div class="search-wrap">
        <div class="common-search ym-box">
          <el-form :model="queryForm" inline>
            <el-form-item class="w-auto">
              <el-select v-model="queryType" placeholder="请选择" style="width: 120px">
                <el-option
                  v-for="item in queryTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label class="w-auto">
              <search-input
                v-model="queryForm.query"
                :placeholder="inputPlaceholder"
                @search="search"
              />
              <!-- <el-input v-model="queryForm.query" :placeholder="inputPlaceholder" @keyup.enter="search">
            <template #append>
              <el-button style="vertical-align: middle;" @click="search">
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </template>
            </el-input>-->
            </el-form-item>
            <!-- <el-form-item label="账号">
              <el-input v-model="queryForm.loginCode" @keyup.enter="search" />
            </el-form-item>
            <el-form-item label="IP">
              <el-input v-model="queryForm.ip" @keyup.enter="search" />
            </el-form-item>

            <el-form-item label="" class="auto">
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item> -->
          </el-form>
        </div>
      </div>

      <div class="table-wrap ym-box">
        <ym-table
          v-loading="state.tableLoading"
          :data="state.tableData"
          :column-data="columnData"
          :style="{ height: `${tableHeight}px` }"
          :height="tableHeight"
          operator-width="100"
        >
          <template #operator="{ row }">
            <el-button type="text" @click="offline(row.loginCode)">强制下线</el-button>
          </template>
        </ym-table>
        <pagination
          v-model:currentPage="state.pageObj.pageNum"
          v-model:pageSize="state.pageObj.pageSize"
          :total="state.pageObj.total"
          @pagination="search"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'

import SearchInput from '@/components/CommonSearch/SearchInput/index.vue'

import SessionApi from '@/api/backend/session'
import { getUserListExceptMe } from '@/api/user'

import { useTable } from '@/utils/common'
import { useConfirm } from '@/utils/common/useConfirm'

import { commonHandle } from '@/views/mixins/common'
import tableOptions from '&/mixins/tableOptions'
import { MainTitle, Pagination, YmTable } from '&/mixins/useComponent'
import IBaseObj from '#/index'

const { tableHeight } = useTable(tableOptions)

const { state, handleSearch } = commonHandle()

const columnData = [
  {
    label: '会话',
    prop: 'session',
    minWidth: '150',
  },
  {
    label: '账号',
    prop: 'loginCode',
  },
  {
    label: '用户名',
    prop: 'userName',
  },
  {
    label: '登录时间',
    prop: 'timeIn',
    minWidth: '160',
  },
  {
    label: 'IP',
    prop: 'ip',
  },
  {
    label: '操作系统',
    prop: 'trace',
  },
  {
    label: '浏览器',
    prop: 'agent',
  },
]

const queryTypeOptions = [
  {
    label: '账号',
    value: 'loginCode',
    placeholder: '输入账号进行查询',
  },
  {
    label: 'IP',
    value: 'ip',
    placeholder: '输入IP进行查询',
  },
]

const queryType = ref('loginCode')

const queryForm = reactive({
  query: '',
})

const inputPlaceholder = computed(() => {
  return queryTypeOptions.filter((val) => val.value === queryType.value)[0].placeholder
})

const userData: IBaseObj = ref([])

const getUserData = async () => {
  const ret = await getUserListExceptMe(0)
  userData.value = ret || []
}
getUserData()

const search = () => {
  handleSearch(SessionApi.getSession, { [queryType.value]: queryForm.query })
}
search()

const offline = (loginCode: string) => {
  useConfirm({ message: '是否将该用户强制下线?' }, async () => {
    const ret = await SessionApi.offlineUser(loginCode)
    console.log('r', ret)
    search()
  })
}
</script>

<style lang="scss" scoped>
:deep() {
  .common-search {
    .el-form-item {
      &.auto {
        .el-form-item__content {
          width: auto;
        }
      }
    }
  }
}
</style>
